<template>
  <button @click="btnClick">Toggle</button>
  <!-- Transition> expects exactly one child element or component. -->
  <!-- mode两个动画，谁先执行。进入动画和离开动画 -->
  <!-- <transition name="fade" mode="in-out"> -->
  <!-- :appear="true" 第一次进入的时候 就添加动画 -->
  <transition name="fade" mode="out-in" :appear="true">
    <div v-if="isShow"><home></home></div>
    <div v-else><about></about></div>
    <!-- <component :is="isShow ? 'home' :'about'"></component> -->
  </transition>
</template>
<script setup>
import home from "./pages/home.vue";
import about from "./pages/About.vue";
import { ref } from "vue";
const isShow = ref(true);
function btnClick() {
  isShow.value = !isShow.value;
}
</script>
<style scoped>
.dong-hua {
  width: 400px;
  height: 200px;
  background-color: aqua;
}
/* from to  */
/* tansiton没有起名字 v-开头 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
/* 这个可省略 因为dom中显示时默认就是 1 */
.fade-leave-from,
.fade-enter-to {
  opacity: 1;
}
/* 进入和离开中 */
.fade-enter-active,
.fade-leave-active {
  /* tansiton过渡 只是两帧 两种状态 显示到隐藏 */
  transition: opacity 2s ease;
}
</style>
